<template>
	<view>
		
			<view class="sou">
			<u-search animation='false' placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
		</view>
		<view class="box">
			<view class="left">
				<view class="leftn">
					<ul v-for="(item,i) in list" :key="item.id">
						<li @click='change(i)' :class="flg==i?'.active':''">{{item.catename}}</li>
					</ul>
				</view>
			</view>
			<view class="right">
			<view class="boxss">
			<view class="boxs">
				热门精选
			</view>
			<view>
			    <u-grid
			            :border="false"
			            @click="click"
			    >
			        <u-grid-item
			                v-for="(baseListItem,baseListIndex) in baseList"
			                :key="baseListIndex"
			        >
			      <!--      <u-icon
			                    :customStyle="{paddingTop:20+'rpx'}"
			                    :name="baseListItem.name"
			                    :size="22"
			            ></u-icon> -->
						<image :src="'http://localhost:3000'+ baseListItem.img" mode="" class="fl"></image>
			            <text class="grid-text">{{baseListItem.catename}}</text>
			        </u-grid-item>
			    </u-grid>
			    <u-toast ref="uToast" />
					 
			</view>
		 </view>
		</view>
	</view>
	</view>
</template>

<script>
	import {getCates} from '../../request/app.js'
	export default {
		data() {
			return {
					keyword: '遥看瀑布挂前川',
					baseList: [],
									list:[],
									arr:[],
									flg:''
			}
		},
		onLoad() {
			this.getCatess()
			
		},
		methods: {
			     click(name) {

				let i=this.baseList[name].id
					 uni.navigateTo({
					 	url:'../list/list?cateid='+i+'&type='+2
					 })
			            },
						// 获取分类下商品一级
						async getCatess(){
							let res=await getCates()
							console.log(res,'99');
						if(res.data.code==200){
							this.list=res.data.list,
							this.baseList=res.data.list[0].children
						}
						},
						change(i){
							console.log(i,'111111');
							this.flg=i
							this.baseList=this.list[i].children
						}
		}
	}
</script>

<style>
	.active{
		background: #FF6600;
		color: white;
	}
	.fl{
		width: 100rpx;
		height: 100rpx;
		margin-top: 20rpx;
	}
.sou{
	background: #FF6600;
	padding: 20rpx;
}
.left{
		background-color: white;
		margin-right: 20rpx;
}
.left .leftn{
	width: 250rpx;
	text-align: center;

}

.left .leftn li{
	margin-top: 90rpx;
	height: 70rpx;
	line-height: 70rpx;
}
.box{
	display: flex;

}
.right .boxss {
	background: white;
	margin-top: 10rpx;
	width: 460rpx;
	height: 400rpx;
	padding: 10rpx;
}
.right .boxss .boxs{
	font-weight: bolder;
	font-size: 30rpx;
	margin-left: 30rpx;
}

</style>
